jQuery(function(){
	jQuery('.dragbox')
	.each(function(){
		jQuery(this).hover(function(){
			jQuery(this).find('h2').addClass('collapse');
		}, function(){
		jQuery(this).find('h2').removeClass('collapse');
		})
		.find('h2').hover(function(){
			jQuery(this).find('.configure').css('visibility', 'visible');
		}, function(){
			jQuery(this).find('.configure').css('visibility', 'hidden');
		})
		.click(function(){
			jQuery(this).siblings('.dragbox-content').toggle();
			//Save state on change of collapse state of panel
			updateWidgetData();
		})
		.end()
		.find('.configure').css('visibility', 'hidden');
	});

	jQuery('.column').sortable({
		connectWith: '.column',
		handle: 'h2',
		cursor: 'move',
		placeholder: 'placeholder',
		forcePlaceholderSize: true,
		opacity: 0.4,
		start: function(event, ui){
			//Firefox, Safari/Chrome fire click event after drag is complete, fix for that
			if(jQuery.browser.mozilla || jQuery.browser.safari)
				jQuery(ui.item).find('.dragbox-content').toggle();
		},
		stop: function(event, ui){
			ui.item.css({'top':'0','left':'0'}); //Opera fix
			if(!jQuery.browser.mozilla && !jQuery.browser.safari)
				updateWidgetData();
		}
	})
	.disableSelection();
});

function updateWidgetData(){
	var items=[];
	jQuery('.column').each(function(){
		var columnId=jQuery(this).attr('id');
		jQuery('.dragbox', this).each(function(i){
			var collapsed=0;
			if(jQuery(this).find('.dragbox-content').css('display')=="none")
				collapsed=1;
			//Create Item object for current panel
			var item={
				id: jQuery(this).attr('id'),
				collapsed: collapsed,
				order : i,
				column: columnId
			};
			//Push item object into items array
			items.push(item);
		});
	});
	//Assign items array to sortorder JSON variable
	var sortorder={ items: items };
	
	//Pass sortorder variable to server using ajax to save state
	jQuery.post('panels/savepanels', 'data='+jQuery.toJSON(sortorder), function(response){
		if(response=="success") 
			jQuery("#console").html('<div class="success">Saved</div>').hide().fadeIn(1000);
		setTimeout(function(){
			jQuery('#console').fadeOut(1000);
		}, 2000);
	});
}
